<template>
    <BaseTable ref="baseTableRef" :data="data" :columns="columns" :config="config"></BaseTable>
    <n-button @click="onBtn">
        获取数据
    </n-button>
</template>
<script lang="ts" setup>
import { h, onMounted } from 'vue'
import { NButton } from 'naive-ui'
import BaseTable from '@/components/BaseTable/edit.vue'
import { getTableList } from '@/mock/local'
import XEUtils from 'xe-utils'
const sourceD = getTableList({
    page_num: 1,
    page_size: 10
}).items
const data = ref(sourceD || [])
const options = [
    { label: '1元', value: 1 },
    { label: '2元', value: 2 },
    { label: '3元', value: 3 },
    { label: '4元', value: 4 },
    { label: '5元', value: 5 },
]
const columns = ref([
    {
        title: '名称',
        key: 'name',
        editType: 'input',
    },
    {
        title: '价格',
        key: 'price',
        editType: 'select',
        changeEdit: true,
        editConf: {
            options: [],
            placeholder: '请选择'

        },
        formateHtml: (row) => {
            return `<div>${row.price}元</div>`
        },
    },
    {
        title: '总数',
        key: 'count'
    },
    {
        title: '创建时间',
        key: 'time',
        editType: 'date',
        changeEdit: true,
        editConf: {
            type:"datetime",
            placeholder: '请选择',
            format: 'yyyy/MM/dd - HH:mm'

        },
        formateHtml: (row) => {
            return `<div>${XEUtils.toDateString(row.time) }</div>`
        },
    },
    {
        title: '操作',
        key: 'actions',
        actionsList: [{
            text: '点击',
            onClick: (row, index) => {
                console.log('play', row, index)
            }
            
        },{
            text: '删除',
            onClick: (row, index) => {
                data.value.splice(index, 1)
                console.log('play', row, index)
            }
        }]
    }
])
const config = ref({})
const baseTableRef = ref()
onMounted(() => {
    baseTableRef.value.onSearch()
    // 异步请求获取数据
    setTimeout(() => {
        columns.value[1].editConf.options = options
    }, 2000)
})
const onBtn = () => {
    data.value = baseTableRef.value.getUpdateData()

    console.log(data.value)
}
</script>
